//修改备注(订单备注/卖家备注)
import { useState, useEffect, useRef } from "react";
import CommonModal from "@/components/CommonModal";
import CommonTextarea from "@/pages/OrderModule/common/components/CommonTextarea";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import { Form, Radio, Space, Alert, Typography } from "antd";
// import OrderAreaRadioGroup from "../components/OrderAreaRadioGroup";
import CommonText from "@/pages/OrderModule/common/components/CommonText/CommonText";
import OrderNumberCount from "../../components/OrderNumberCount";
import CommonLoading from "@/components/CommonLoading";
import { updateOrderRemarkOp, updateSellerRemarkOp } from "../../../../services";
import { isEmpty } from "lodash";
import OrderAreaRadioGroup from "../../components/OrderAreaRadioGroup1";
import IconFont from "@/components/IconFont";

const remarkTypeMap = {
	orderRemark: "订单",
	sellerMessage: "卖家"
};

//旗帜🚩
const falgsList = [
	{
		label: <CommonText extractIcon={<IconFont type="iconqizhihong"></IconFont>} />,
		value: 1
	},
	{
		label: <CommonText extractIcon={<IconFont type="iconqizhihuang"></IconFont>} />,
		value: 2
	},
	{
		label: <CommonText extractIcon={<IconFont type="iconqizhilv"></IconFont>} />,
		value: 3
	},
	{
		label: <CommonText extractIcon={<IconFont type="iconqizhilan"></IconFont>} />,
		value: 4
	},
	{
		label: <CommonText extractIcon={<IconFont type="iconqizhizi"></IconFont>} />,
		value: 5
	},
	{
		label: <span>无旗帜</span>,
		value: 0
	}
];

/** 修改订单备注 */
const SetOrderNothsModal = props => {
	const [showNumber, setShowNumber] = useState({});
	const [loading, setLoading] = useState(false);

	const [form] = Form.useForm();

	const typeValue = Form.useWatch("type", form);

	const { searchForm, orderList, operationPage, selectKeys, recordData, handleCancel, remarkType, isBatch, handleOk } = props;

	const filterIds = useRef(undefined);

	useEffect(() => {
		form.resetFields();
	}, []);

	const handleEditRemark = async val => {
		setLoading(true);
		let res;
		const params = {
			ids: isBatch ? filterIds.current || selectKeys : [recordData.id],
			type: isBatch ? val.type : 1,
			operationPage: operationPage == "sysOrder" ? "2" : "3",
			flag: val?.flag == 'undefined' ? null : val?.flag,
			[remarkType]: val[remarkType]
		};
		if (remarkType == "orderRemark") {
			//订单备注
			res = await updateOrderRemarkOp(params);
		} else {
			//卖家备注
			res = await updateSellerRemarkOp(params);
		}
		const { success, data = {} } = res;
		if (success) {
			if (isBatch) {
				handleOk();
			} else {
				handleOk(recordData.id);
			}
		}
		setLoading(false);
	};

	const onOk = () => {
		// const val = form.getFieldsValue();
		form
			.validateFields()
			.then(val => {
				handleEditRemark(val);
			})
			.catch(err => {
				console.log(err);
			});
	};

	const orderAreaRadioProps = {
		searchForm,
		selectKeys,
		orderList,
		title: "（所有状态都支持）",
		states: [10, 20, 30, 40, 50],
		updateShowNumer(obj, ids) {
			filterIds.current = ids;
			setShowNumber(obj);
		}
	};

	return (
		<CommonModal
			title={ remarkType == "orderRemark" ? "修改订单备注" : `修改卖家备注/旗帜` }
			open={true}
			width="600px"
			onOk={onOk}
			onCancel={handleCancel}
		>
			{remarkType == "sellerMessage" && (
				<Alert
					showIcon
					message={
						<Typography as="s1">
							1、卖家备注编辑后支持同步平台；
							<br />
							2、目前淘宝、京东、拼多多、抖音、快手、天猫供销平台支持同步。
						</Typography>
					}
					style={{ marginBottom: 16 }}
				/>
			)}
			<Form
				initialValues={{
					[remarkType]: !isEmpty(recordData) ? recordData[remarkType] : undefined,
					flag: !isEmpty(recordData) ? recordData.flag[0] + "" : null,
					type: "1"
				}}
				form={form}
			>
				{isBatch && (
					<>
						<Form.Item>
							<OrderAreaRadioGroup {...orderAreaRadioProps} />
						</Form.Item>
					</>
				)}
				<>
					{isBatch && (
						<OrderNumberCount
							data={[
								{ label: "待审核", value: showNumber[10], type: "warning" },
								{ label: "异常", value: showNumber[30], type: "error" },
								{ label: "已发货", value: showNumber[40], type: "success" },
								{ label: "待发货", value: showNumber[20], type: "success" },
								{ label: "已作废", value: showNumber[50], type: "error" }
							]}
						/>
					)}
					<SubTitle symbol as="s2" title={`修改${remarkTypeMap[remarkType]}备注`} wrapStyle={{ margin: "16px 0" }} />
					{isBatch && (
						<Form.Item name="type" rules={[{ required: true, message: `请选择${remarkTypeMap[remarkType]}备注类型` }]}>
							<Radio.Group>
								<Space direction="vertical">
									<Radio value="1">{`覆盖原有${remarkTypeMap[remarkType]}备注`}</Radio>
									<Radio value="2">追加备注</Radio>
									<Radio value="3">{`清空已有的${remarkTypeMap[remarkType]}备注`}</Radio>
								</Space>
							</Radio.Group>
						</Form.Item>
					)}
					{typeValue != 3 && (
						<Form.Item name={[remarkType]} rules={[{ required: false, message: `请输入${remarkTypeMap[remarkType]}备注` }]}>
							<CommonTextarea showCount maxLength={100} placeholder={`请输入${remarkTypeMap[remarkType]}备注`} rows={2} />
						</Form.Item>
					)}
				</>
				{remarkType == "sellerMessage" ? (
					<Form.Item>
						{/* <SubTitle symbol as="s2" title="旗帜" wrapStyle={{ margin: "16px 0" }} /> */}
						<Form.Item label="" colon={true} name="flag">
							<Radio.Group style={{ width: "100%" }}>
								<Space direction="horizontal">
									{isBatch ? <Radio value={null}>不修改</Radio> : ""}
									{falgsList.map(item => (
										<Radio style={{ display: "flex", alignItems: "flex-start" }} key={item.value} value={item.value + ""}>
											{item.label}
										</Radio>
									))}
								</Space>
								{/* <div style={{ marginTop: "16px" }}>
									<Radio value={"0"}>无旗帜</Radio>
								</div> */}
							</Radio.Group>
						</Form.Item>
					</Form.Item>
				) : (
					""
				)}
			</Form>
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};

export default SetOrderNothsModal;
